<template>
  <div class="filter-form__container v-flex-fixed">
    <div class="filter-form__btn_group">
      <el-button
        v-if="show.addForm"
        class="filter-form__button"
        type="primary"
        size="mini"
        icon="el-icon-plus"
        plain
        @click="addForm">新增</el-button>
      <el-button
        v-if="show.deleta"
        class="filter-form__button"
        type="primary"
        size="mini"
        icon="el-icon-delete"
        plain
        @click="deleta">删除</el-button>
      <el-button
        v-if="show.search"
        class="filter-form__button"
        type="primary"
        size="mini"
        icon="el-icon-download"
        plain
        @click="search">导出</el-button>
      <!--  <export-excel ref="export" table-id="dataTable" btn-text="导出" :file-name="excelName" @before="getAllList" @complete="onSubmit" /> -->
      <a class="form-qieh" @click="isActive=!isActive" />
      <el-button
        v-if="show.toggleSearch"
        class="filter-form__button"
        type="primary"
        size="mini"
        icon="el-icon-search"
        @click="toggleSearch">查询</el-button>
    </div>
    <el-collapse-transition>
      <div v-show="searchShow">
        <el-form ref="filterForm" :model="form" @keyup.enter.native="search" @submit.native.prevent>
          <filter-item
            v-for="(value, key) in data"
            :key="key"
            :form="form"
            :item="value"
            :split="split" />
          <div v-if="hasDefaultOperation" class="filter-form__btn_group_center">
            <el-button
              class="filter-form__button"
              type="primary"
              size="mini"
              @click="search">查询</el-button>
            <el-button
              class="filter-form__button"
              type="primary"
              size="mini"
              @click="search">重置</el-button>
            <el-button
              class="filter-form__button"
              type="primary"
              size="mini"
              @click="toggleSearch">收起</el-button>
              <!-- <template v-if="!onlyQuery">
              <el-button
                v-permission-button="publicConfig['ITPS-ADD']"
                class="filter-form__button"
                type="primary"
                size="mini"
                icon="el-icon-plus"
                @click="addForm">{{ addText }}</el-button>
            </template>-->
          </div>
          <slot />
        </el-form>
      </div>
    </el-collapse-transition>
  </div>
</template>
<script>
import ExportExcel from './ExportExcel'
import FilterItem from './FilterItem'
export default {
  name: 'FilterForm',
  components: {
    FilterItem,
    ExportExcel
  },
  props: {
    form: {
      required: true,
      type: Object,
      default() {
        return {}
      }
    },
    data: {
      required: true,
      type: Object,
      default() {
        return {}
      }
    },
    show: {
      required: false,
      type: Object,
      default() {
        return {
          addForm: true,
          deleta: true,
          search: true,
          toggleSearch: true
        }
      }
    },
    addText: {
      type: String,
      default: '添加'
    },
    hasDefaultOperation: {
      type: Boolean,
      default: true
    },
    onlyQuery: {
      type: Boolean,
      default: false
    },
    split: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      searchShow: false
    }
  },
  methods: {
    onSubmit() {
      this.$emit('search', this.valuek)
    },
    getAllList() {
      this.$emit('search', { ...this.valuek, size: 99999 })
    },
    exportExcel() {
      setTimeout(_ => {
        this.$refs.export.exportExcel()
      }, 500)
    },
    toggleSearch() {
      this.searchShow = !this.searchShow
      this.$emit('resizeTable')
    },
    search() {
      this.$emit('search')
    },
    deleta() {
      this.$emit('deleta')
    },
    addForm() {
      this.$emit('addForm')
    }
  }
}
</script>
<style lang="scss">
.filter-form__container {
  font-size: 0;
  .filter-item {
    display: inline-block;
    padding-right: 10px;
    vertical-align: middle;
    .el-form-item {
      margin-bottom: 10px;
      .el-form-item__content {
        line-height: 28px;
      }
    }
    .el-input,
    .el-input__inner {
      height: 28px;
      line-height: 28px;
    }
    .el-input__icon {
      line-height: 28px;
    }
    .el-date-editor.el-input {
      width: 100%;
    }
    .el-select{
      .el-select__tags-text{
        display: inline-block;
        max-width: 55px;
        overflow: hidden;
        vertical-align: middle;
      }
    }
  }
  .filter-form__button {
    margin-bottom: 10px;
    //border-bottom: none;
  }
}
</style>
